import React, { useMemo, useState } from 'react'
import './login.css'
import { NavBar, Space, Toast, Input, Form, Button } from 'antd-mobile'
import { CloseOutline, MoreOutline, SearchOutline } from 'antd-mobile-icons'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { addPhone } from '../../store/modules/cart'
export default function Login() {
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const right = (<div style={{ fontSize: 24 }}>
        <Space style={{ '--gap': '16px' }}>
            <SearchOutline />
            <MoreOutline />
        </Space>
    </div>);
    const back = () => Toast.show({
        content: '点击了返回区域',
        duration: 1000,
    });
    const [phone, setPhone] = useState('')
    const [yzm, setYzm] = useState('')
    const getyzm = async () => {

        await axios.post('http://localhost:3000/myjdeng/asdasd', { phone: phone }).then(val => {
            // await axios.post('http://localhost:3000/myjdeng/getyzma',{phone:phone}).then(val=>{
            if (val.data.code == 0) {
                Toast.show({
                    content: '验证码已发送',
                    duration: 1000,
                })
            }
        })
    }
    const dengl = async () => {
        await axios.post('http://localhost:3000/myjdeng/getlist', { phone: phone, yzm: yzm }).then(val => {
            Toast.show({
                content: val.data.msg,
                duration: 3000,
            })
            if (val.data.code == 201) {
                navigate('/mima')
            } else if (val.data.code == 200) {
                //存储当前用户名字(聂润泽需要)
                dispatch(addPhone(val.data.name))
                navigate('/asd')
            }
        })
    }
    return (
        <div className='dahe'>

            <NavBar onBack={back}></NavBar>
            <div className='cont'>
                <span className='span1'>验证码登录</span><br />
                <span className='span2'>
                    未注册的手机号验证后自动完成注册
                </span>
                <div className='shuru'>
                    <Input placeholder='请输入手机号' clearable value={phone} onChange={(aa) => {
                        setPhone(aa)
                    }} />
                    <div className='yzma1'>
                        <div className='yzma'>
                            <Input placeholder='请输入验证码' clearable value={yzm} onChange={(aa) => {
                                setYzm(aa)
                            }} />
                        </div>
                        <button className='huoqu' onClick={() => {
                            const phoneRegex = /^1\d{10}$/;
                            if (!phoneRegex.test(phone)) {
                                Toast.show({
                                    content: '请输入正确的手机号',
                                    duration: 1000,
                                });
                                return
                            } else {
                                getyzm()

                            }
                        }}>验证码</button>
                    </div>
                    <div className='denglu'>
                        <Button block shape='rounded' color='primary' onClick={() => {
                            if (yzm.length == 6) {
                                dengl()
                            } else {
                                Toast.show({
                                    content: '请输入正确的验证码',
                                    duration: 1000,
                                });
                                return
                            }
                        }}>
                            登录
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    )
}
